<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块架构图</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.0.2/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .chart-container {
            margin-bottom: 40px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background-color: #fafafa;
        }
        h2 {
            color: #555;
            border-bottom: 2px solid #4A90E2;
            padding-bottom: 10px;
        }
        .mermaid {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>模块架构图</h1>
        
        <div class="chart-container">
            <h2>前端模块架构</h2>
            <div class="mermaid">
graph TB
    A[前端应用<br/>React/Next.js] --> B[用户认证模块]
    A --> C[首页展示模块]
    A --> D[产品展示模块]
    A --> E[产品详情模块]
    A --> F[购物车模块]
    A --> G[订单结算模块]
    A --> H[订单管理模块]
    A --> I[产品溯源模块]
    A --> J[用户中心模块]
    A --> K[管理员后台模块]
    
    style A fill:#4A90E2,stroke:#333,stroke-width:2px,color:#fff
    style B fill:#7DBCEA,stroke:#333,stroke-width:1px
    style C fill:#7DBCEA,stroke:#333,stroke-width:1px
    style D fill:#7DBCEA,stroke:#333,stroke-width:1px
    style E fill:#7DBCEA,stroke:#333,stroke-width:1px
    style F fill:#7DBCEA,stroke:#333,stroke-width:1px
    style G fill:#7DBCEA,stroke:#333,stroke-width:1px
    style H fill:#7DBCEA,stroke:#333,stroke-width:1px
    style I fill:#7DBCEA,stroke:#333,stroke-width:1px
    style J fill:#7DBCEA,stroke:#333,stroke-width:1px
    style K fill:#7DBCEA,stroke:#333,stroke-width:1px
            </div>
        </div>
        
        <div class="chart-container">
            <h2>后端模块架构</h2>
            <div class="mermaid">
graph TB
    A[后端服务<br/>Spring Boot] --> B[用户认证模块]
    A --> C[用户管理模块]
    A --> D[产品管理模块]
    A --> E[购物车管理模块]
    A --> F[订单管理模块]
    A --> G[产品溯源模块]
    A --> H[文件上传模块]
    A --> I[支付模拟模块]
    A --> J[短信服务模块]
    A --> K[地图服务模块]
    
    B --> L[JWT认证]
    B --> M[密码加密]
    
    C --> N[用户信息管理]
    C --> O[用户权限管理]
    
    D --> P[产品信息管理]
    D --> Q[产品分类管理]
    D --> R[库存管理]
    
    E --> S[购物车增删改查]
    
    F --> T[订单创建]
    F --> U[订单查询]
    F --> V[订单状态管理]
    
    G --> W[溯源信息查询]
    G --> X[批次管理]
    
    H --> Y[文件存储]
    H --> Z[图片处理]
    
    style A fill:#50C878,stroke:#333,stroke-width:2px,color:#fff
    style B fill:#8FBC8F,stroke:#333,stroke-width:1px
    style C fill:#8FBC8F,stroke:#333,stroke-width:1px
    style D fill:#8FBC8F,stroke:#333,stroke-width:1px
    style E fill:#8FBC8F,stroke:#333,stroke-width:1px
    style F fill:#8FBC8F,stroke:#333,stroke-width:1px
    style G fill:#8FBC8F,stroke:#333,stroke-width:1px
    style H fill:#8FBC8F,stroke:#333,stroke-width:1px
    style I fill:#8FBC8F,stroke:#333,stroke-width:1px
    style J fill:#8FBC8F,stroke:#333,stroke-width:1px
    style K fill:#8FBC8F,stroke:#333,stroke-width:1px
    style L fill:#B0E0E6,stroke:#333,stroke-width:1px
    style M fill:#B0E0E6,stroke:#333,stroke-width:1px
    style N fill:#B0E0E6,stroke:#333,stroke-width:1px
    style O fill:#B0E0E6,stroke:#333,stroke-width:1px
    style P fill:#B0E0E6,stroke:#333,stroke-width:1px
    style Q fill:#B0E0E6,stroke:#333,stroke-width:1px
    style R fill:#B0E0E6,stroke:#333,stroke-width:1px
    style S fill:#B0E0E6,stroke:#333,stroke-width:1px
    style T fill:#B0E0E6,stroke:#333,stroke-width:1px
    style U fill:#B0E0E6,stroke:#333,stroke-width:1px
    style V fill:#B0E0E6,stroke:#333,stroke-width:1px
    style W fill:#B0E0E6,stroke:#333,stroke-width:1px
    style X fill:#B0E0E6,stroke:#333,stroke-width:1px
    style Y fill:#B0E0E6,stroke:#333,stroke-width:1px
    style Z fill:#B0E0E6,stroke:#333,stroke-width:1px
            </div>
        </div>
        
        <div class="chart-container">
            <h2>数据库模块关系</h2>
            <div class="mermaid">
graph TB
    A[用户表<br/>users] --> B[购物车表<br/>shopping_cart]
    A --> C[订单表<br/>orders]
    D[产品表<br/>products] --> B
    D --> C
    D --> E[订单详情表<br/>order_items]
    D --> F[溯源信息表<br/>traceability_info]
    C --> E
    A --> G[用户地址表<br/>user_addresses]
    
    style A fill:#FF6B6B,stroke:#333,stroke-width:2px,color:#fff
    style B fill:#FFA07A,stroke:#333,stroke-width:1px
    style C fill:#FFA07A,stroke:#333,stroke-width:1px
    style D fill:#FF6B6B,stroke:#333,stroke-width:2px,color:#fff
    style E fill:#FFA07A,stroke:#333,stroke-width:1px
    style F fill:#FFA07A,stroke:#333,stroke-width:1px
    style G fill:#FFA07A,stroke:#333,stroke-width:1px
            </div>
        </div>
        
        <div class="chart-container">
            <h2>API接口模块</h2>
            <div class="mermaid">
graph TB
    A[RESTful API] --> B[认证接口<br/>/auth/**]
    A --> C[用户接口<br/>/users/**]
    A --> D[产品接口<br/>/products/**]
    A --> E[购物车接口<br/>/cart/**]
    A --> F[订单接口<br/>/orders/**]
    A --> G[溯源接口<br/>/trace/**]
    A --> H[文件接口<br/>/upload/**]
    A --> I[支付接口<br/>/payment/**]
    
    style A fill:#9370DB,stroke:#333,stroke-width:2px,color:#fff
    style B fill:#BA55D3,stroke:#333,stroke-width:1px
    style C fill:#BA55D3,stroke:#333,stroke-width:1px
    style D fill:#BA55D3,stroke:#333,stroke-width:1px
    style E fill:#BA55D3,stroke:#333,stroke-width:1px
    style F fill:#BA55D3,stroke:#333,stroke-width:1px
    style G fill:#BA55D3,stroke:#333,stroke-width:1px
    style H fill:#BA55D3,stroke:#333,stroke-width:1px
    style I fill:#BA55D3,stroke:#333,stroke-width:1px
            </div>
        </div>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true
            }
        });
    </script>
</body>
</html>